<template>
	<view class="card-detail">
		<view class="top">
			<card-pack-item :data="data" showQrcode />

			<u-row :gutter="20" v-if="data.type != 2">
				<u-col :span="6">
					<view class="box text-center">
						<view class="number">{{data.else_text}}</view>
						<view>剩余额度</view>
					</view>
				</u-col>
				<u-col :span="6">
					<view class="box text-center" v-if="data.cardstate == 1">
						<view class="number">--</view>
						<view>剩余使用天数</view>
					</view>
					<view class="box text-center" v-if="data.cardstate == 2">
						<view class="number">{{data.elseDays}}</view>
						<view>剩余使用天数</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<u-tabs :list="list6" :scrollable="false" @click="click"></u-tabs>
		<!-- 消费记录 -->
		<u-cell-group v-if="xiaofei">
			<u-cell v-for="item in recordList" :key="item.id" :index="item.id">
				<view slot="title">
					<view class="name" v-if="item.op == 0" style="color: #4f58ff">充值记录</view>
					<view class="name" v-if="item.op == 1" style="color: #ff0000">{{item.goods_name}}</view>
					<view class="name" v-if="item.op == 2" style="color: #ffaa00">退款记录</view>
					<view class="date">{{ item.created_at }}</view>
				</view>
				<!-- 计次卡 -->
				<view slot="value" class="text-right" v-show="item.card_type == 1">
					<view class="number" v-if="item.op == 0" style="color: #4f58ff"><text>+</text> {{ item.times }}<text
							v-if="item.gift_times != ''" style="color: #ff0000;">赠{{ item.gift_times}}</text></view>
					<view class="number" v-if="item.op == 1" style="color: #ff0000">
						<text>-</text>{{parseFloat(item.gift_times) + parseFloat(item.times ) }}</view>
					<view class="number" v-if="item.op == 2" style="color: #ffaa00"><text>+</text> {{ item.times }}<text
							v-if="item.gift_times != ''" style="color: #ff0000;">赠{{ item.gift_times}}</text></view>
					<view class="rest" v-if="item.else_times">剩余:{{ item.else_times }}次</view>
				</view>
				<!-- 私教卡 -->
				<view slot="value" class="text-right" v-show="item.card_type == 4">
					<view class="number" v-if="item.op == 0" style="color: #4f58ff"><text>+</text> {{ item.times }}<text
							v-if="item.gift_times != ''" style="color: #ff0000;">赠{{ item.gift_times}}</text></view>
					<view class="number" v-if="item.op == 1" style="color: #ff0000">
						<text>-</text>{{parseFloat(item.gift_times) + parseFloat(item.times ) }}</view>
					<view class="number" v-if="item.op == 2" style="color: #ffaa00"><text>+</text> {{ item.times }}<text
							v-if="item.gift_times != ''" style="color: #ff0000;">赠{{ item.gift_times}}</text></view>
					<view class="rest" v-if="item.else_times">剩余:{{ item.else_times }}次</view>
				</view>
				<!-- 金额卡 -->
				<view slot="value" class="text-right" v-show="item.card_type == 3">
					<!-- <view class="number"><text v-if="item.op == 0" style="color: #4f58ff">+</text> <text style="color: #ff0000" v-if="item.op == 1">-</text>{{ item.money }}</view> -->
					<view class="number" v-if="item.op == 0" style="color: #4f58ff"><text>+</text> {{ item.money }}<text
							v-if="item.gift_money != ''" style="color: #ff0000;">赠{{ item.gift_money}}</text> </view>
					<view class="number" v-if="item.op == 1" style="color: #ff0000"> <text>-</text>
						{{parseFloat(item.money ) + parseFloat(item.gift_money ) }}</view>
					<view class="number" v-if="item.op == 2" style="color: #ffaa00"><text>+</text> {{ item.money }}<text
							v-if="item.gift_money != ''" style="color: #ff0000;">赠{{ item.gift_money}}</text> </view>
					<view class="rest" v-if="item.else_money">剩余:{{ item.else_money }}元</view>
				</view>
				<!-- 时间卡 -->
				<view slot="value" class="text-right" v-show="item.card_type == 2">
					<!-- <view class="number"><text v-if="item.op == 0" style="color: #4f58ff">+</text> <text style="color: #ff0000" v-if="item.op == 1">-</text>{{ item.days }}</view> -->
					<view class="number" v-if="item.op == 0" style="color: #4f58ff"><text>+</text> {{ item.days }}<text
							v-if="item.gift_days != ''" style="color: #ff0000;">赠{{ item.gift_days}}</text></view>
					<view class="number" v-if="item.op == 1" style="color: #ff0000">
						<text>-</text>{{parseFloat(item.gift_days ) + parseFloat(item.days ) }}</view>
					<view class="number" v-if="item.op == 2" style="color: #ffaa00"><text>+</text> {{ item.days }}<text
							v-if="item.gift_days != ''" style="color: #ff0000;">赠{{ item.gift_days}}</text></view>
					<view class="rest" v-if="item.else_days">剩余:{{ item.else_days }}天</view>
				</view>
			</u-cell>
		</u-cell-group>
		<!-- 我的档案袋 & 其他端口 -->
		<!-- <block v-for="(item,index) in list" > -->
		<zqBox v-model="scrollTop" v-if="kapian">
			<view class="menu-cates" >
				<!-- <view class="menu-cate-item_s" v-for="(it, indexs) in menuList" :key="indexs" @click="onClickMenu(it)">
					<view class="pr flex-center flex-column" >
						<u-badge numberType="overflow" type="error" max="99" :value="it.badge" :show="it.badge" absolute
							:offset="[-5, -5]" />
						<u-image :src="it.icon" width="90rpx" height="90rpx" />
							注释--<u-image :src="it.icon" :width="it.width || '68rpx'" :height="it.height || '68rpx'"
									v-else /> -- 注释
						<text style="margin-top: 10rpx;">{{it.name}}</text>
					</view>
				</view> -->

				
				<!-- <view class="menu-cate-item_s" @click="onClickMenu(0)">
					<view class="pr flex-center flex-column" >
						<u-image :src="`${assetsPath}55c185face7284557a4d1d488707f888f3aaa1b0.png`" width="90rpx" height="90rpx" />
						<text style="margin-top: 10rpx;">续充</text>
					</view>
				</view> -->
				<view class="menu-cate-item_s" @click="onClickMenu(8)" v-if="data.cardstate == 3">
					<view class="pr flex-center flex-column" >
						<u-image :src="`${assetsPath}0adf9dc505ec328beccf5e0ed13291e3c59ad987.png`" width="90rpx" height="90rpx" />
						<text style="margin-top: 10rpx;">解挂</text>
					</view>
				</view> 
				<view class="menu-cate-item_s" @click="onClickMenu(1)" v-else>
					<view class="pr flex-center flex-column" >
						<u-image :src="`${assetsPath}0adf9dc505ec328beccf5e0ed13291e3c59ad987.png`" width="90rpx" height="90rpx" />
						<text style="margin-top: 10rpx;">挂失</text>
					</view>
				</view> 
				
				<view class="menu-cate-item_s" @click="onClickMenu(2)">
					<view class="pr flex-center flex-column" >
						<u-image :src="`${assetsPath}99b1a3877fc0f9dd8527259dfa5dc1912ef66c16.png`" width="90rpx" height="90rpx" />
						<text style="margin-top: 10rpx;">转移</text>
					</view>
				</view> 
				<!-- <view class="menu-cate-item_s" @click="onClickMenu(3)">
					<view class="pr flex-center flex-column" >
						<u-image :src="`${assetsPath}9b3369b45123048582bb93cc91e2eebcaed4cf93.png`" width="90rpx" height="90rpx" />
						<text style="margin-top: 10rpx;">延期</text>
					</view>
				</view> 
				<view class="menu-cate-item_s" @click="onClickMenu(4)">
					<view class="pr flex-center flex-column" >
						<u-image :src="`${assetsPath}f2f3bd252aa42561264d53561b7a1e08973ffd24.png`" width="90rpx" height="90rpx" />
						<text style="margin-top: 10rpx;">转让</text>
					</view>
				</view> -->
				<view class="menu-cate-item_s" @click="onClickMenu(5)">
					<view class="pr flex-center flex-column" >
						<u-image :src="`${assetsPath}0adb2e9c34f2584a114adbcfd30da76437d733a7.png`" width="90rpx" height="90rpx" />
						<text style="margin-top: 10rpx;">充值记录</text>
					</view>
				</view> 
				<!-- <view class="menu-cate-item_s" @click="onClickMenu(6)">
					<view class="pr flex-center flex-column" >
						<u-image :src="`${assetsPath}7791562f4d0afe050feb9ee6efff491072a5b4b9.png`" width="90rpx" height="90rpx" />
						<text style="margin-top: 10rpx;">分享</text>
					</view>
				</view> 
				<view class="menu-cate-item_s" @click="onClickMenu(7)">
					<view class="pr flex-center flex-column" >
						<u-image :src="`${assetsPath}71430e79a08eb1216653e4f6b1c89150f6f4c2cd.png`" width="90rpx" height="90rpx" />
						<text style="margin-top: 10rpx;">保证金</text>
					</view>
				</view> -->
			</view>
		</zqBox>
		<!-- </block> -->
		<!-- 挂失/解挂 -->
		<div class="vueMdelBox">
			<div :hidden="vueShowModel" class="vueContant">
				<div class="vueTitle">{{title}}</div>
				<div class="vueDetail">
					<u-tag v-for="(item2,index2) in data_specs" :key="index2" :text="item2.name" type="warning"
						:bgColor="
					    data_name.indexOf(item2) > -1
					      ? '#2F75FA'
					      : '#EFEFEF'
					  " :borderColor="
					    data_name.indexOf(item2) > -1 ? '#2F75FA' : 'rgba(0,0,0,0)'
					  " :color="data_name.indexOf(item2) > -1 ? '#ffffff' : '#333'" @click="data_specss(item2,index2)" size="large" />

				</div>
				<view class="" style="width: 80%;height: auto;margin-left: 10%;">
					<u-textarea v-model="content" placeholder="请输入挂失理由" border="none" height="100"></u-textarea>
				</view>
				<div class="vueBtn">
					<u-button text="我再想想" shape="circle" size="small"
						color="linear-gradient(0deg, rgb(211, 211, 211) 0%, rgb(211, 211, 211) 65%)"
						@click="cancel()"></u-button>
					<u-button text="确认挂失" shape="circle" size="small"
						color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 65%)"
						@click="cancellist()"></u-button>
				</div>
			</div>
			<div class="vueBgdCol" :hidden="vueShowModel" @click="setting()"></div>
		</div>
		<!-- 挂失/解挂 -->
		<div class="vueMdelBox">
			<div :hidden="vueShowModels" class="vueContants">
				<div class="vueTits">{{titles}}</div>

				<div class="vueBtns">
					<u-button text="不解挂" shape="circle" size="small"
						color="linear-gradient(0deg, rgb(211, 211, 211) 0%, rgb(211, 211, 211) 65%)" @click="canlist()">
					</u-button>
					<u-button text="解挂" shape="circle" size="small"
						color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 65%)" @click="cellist()">
					</u-button>
				</div>
			</div>
			<div class="vueBgdCol" :hidden="vueShowModels" @click="settings()"></div>
		</div>

	</view>
</template>

<script>
	import cardPackItem from './card-pack-item.vue'
	const index = require('@/api/personal/index.js')
	export default {
		components: {
			cardPackItem
		},
		data() {
			return {
				assetsPath: this.$https.assetsPath,
				data: {
					address: '骏熙泰羽',
					name: '篮球充值卡',
					number: '2565 8888',
					balance: 1368,
					unit: '元',
					date: '2021/12/31'
				},
				// recordList: [{
				// 		id: 1,
				// 		name: '转给:李达',
				// 		date: '2020/12/12 12:12:12',
				// 		number: '-2次',
				// 		rest: '5340'
				// 	},
				// 	{
				// 		id: 2,
				// 		name: '转给:李达',
				// 		date: '2020/12/12 12:12:12',
				// 		number: '¥200'
				// 	}
				// ],
				cardno: '',
				list6: [{
					name: '卡片服务'
				}, {
					name: '消费记录',
				}],
				xiaofei: false,
				kapian: true,
				menuList: [{
						id: '0',
						icon: this.$https.assetsPath + '55c185face7284557a4d1d488707f888f3aaa1b0.png',
						name: '续充',
						url: '/pages_other/cardbag/card_Recharging'
					},
					{
						id: '1',
						icon: this.$https.assetsPath + '0adf9dc505ec328beccf5e0ed13291e3c59ad987.png',
						name: '挂失',
						url: '/pages_other/cardbag/card_cancellation'
					},
					{
						id: '8',
						icon: this.$https.assetsPath + '0adf9dc505ec328beccf5e0ed13291e3c59ad987.png',
						name: '解挂',
						url: '/pages_other/cardbag/card_cancellation'
					},
					{
						id: '2',
						icon: this.$https.assetsPath + '99b1a3877fc0f9dd8527259dfa5dc1912ef66c16.png',
						name: '转移',
						url: '/pages_other/cardbag/card_transfer'
					},
					{
						id: '3',
						icon: this.$https.assetsPath + '9b3369b45123048582bb93cc91e2eebcaed4cf93.png',
						name: '延期',
						url: '/pages_other/cardbag/card_delay'
					},
					{
						id: '4',
						icon: this.$https.assetsPath + 'f2f3bd252aa42561264d53561b7a1e08973ffd24.png',
						name: '转让',
						url: '/pages_other/cardbag/card_possession'
					},
					{
						id: '5',
						icon: this.$https.assetsPath + '0adb2e9c34f2584a114adbcfd30da76437d733a7.png',
						name: '充值记录',
						url: '/pages_other/cardbag/card_record'
					},
					{
						id: '6',
						icon: this.$https.assetsPath + '7791562f4d0afe050feb9ee6efff491072a5b4b9.png',
						name: '分享',
						url: '/pages_other/cardbag/card_share'
					},
					{
						id: '7',
						icon: this.$https.assetsPath + '71430e79a08eb1216653e4f6b1c89150f6f4c2cd.png',
						name: '保证金',
						url: '/pages_other/cardbag/card_deposit'
					},
				],
				cardno: "",
				vueShowModel: true, //默认不显示
				vueShowModels: true, //默认不显示
				data_specs: [{
						checked: true,
						name: "丢失",
						ticket_id: "77",
					},
					{
						checked: false,
						name: "被盗",
						ticket_id: "77",
					},
					{
						checked: false,
						name: "其他",
						ticket_id: "77",
					}
				],
				data_name: [],
				title: '标题',
				titles: '是否将此卡解除挂失',
				recordList: [],
				card_id: '',
				content: '',
				id:''
			}
		},
		onLoad(options) {
			console.log(options)
			this.cardno = options.cardno
			this.id = options.id
			this.getMyCardDetail()
		},
		methods: {
			// 金额计算保留两位小数
			amount(value) {
				return parseFloat(value).toFixed(2);
			},
			data_specss(item2, index2) {
				console.log(item2, index2)
				this.title = item2.name
				this.content = item2.name
				this.chooseStock = 0
				this.data_name = []
				this.namedata = item2.name
				this.ticket_id = item2.ticket_id
				let data_name = []
				this.data_specs.forEach(item => {
					data_name.push(item)
				})
				data_name.some((item, index) => {
					if (item == item2) {
						this.data_name[index] = item2;
						this.$forceUpdate();
					}
				});

				this.data_specs.map((item, index) => {
					item.checked = index === index2 ? true : false
				})

			},
			// 点击按钮打开弹框
			vueToMdel() {
				this.vueShowModel = false;
			},
			// 点击蒙版按钮模态框消失
			setting() {
				this.vueShowModel = true;
			},
			settings() {
				this.vueShowModels = true;
			},
			// 点击取消按钮模态框消失
			cancel() {
				this.vueShowModel = true;
			},
			cancellist() {
				this.vueShowModel = true;
			},
			canlist() {
				this.vueShowModels = true;
			},
			cellist() {
				this.vueShowModels = true;
			},
			
			// 点击确定按钮模态框消失
			confirm() {
				this.vueShowModel = true;
			},
			click(item) {
				if (item.index == 0) {
					this.xiaofei = false
					this.kapian = true
				} else if (item.index == 1) {
					this.getMoneyRecord(this.card_id)
					this.xiaofei = true
					this.kapian = false
				}
			},
			onClickMenu(item) {
				console.log(item)
				let that = this
				if (item == "0") {
					// uni.navigateTo({
					// 	url: '/pages_other/cardbag/card_Recharging?cardno=' + this.cardno
					// })
					uni.showToast({
						title: '敬请期待',
						icon:'exception',
						duration:850
					});
				}
				if (item == "1") {
					uni.navigateTo({
						url: '/pages_other/cardbag/card_cancellation?cardno=' + this.cardno
					})
				}
				if (item == "2") {
					if (this.data.type != 2) {
						uni.navigateTo({
							url: '/pages_other/cardbag/card_transfer?cardno=' + this.cardno
						})
					}
				}
				if (item == "3") {
					// uni.navigateTo({
					// 	url: '/pages_other/cardbag/card_delay?cardno=' + this.cardno
					// })
					uni.showToast({
						title: '敬请期待',
						icon:'exception',
						duration:850
					});
				}
				if (item == "4") {
					// if (this.data.type != 2) {
					// 	uni.navigateTo({
					// 		url: '/pages_other/cardbag/card_possession?cardno=' + this.cardno
					// 	})
					// }
					uni.showToast({
						title: '敬请期待',
						icon:'exception',
						duration:850
					});
				}
				if (item == "5") {
					uni.navigateTo({
						url: '/pages_other/cardbag/card_record?card_id=' + this.card_id
					})
				}
				if (item == "8") {
					// this.vueShowModels = false;
					uni.showModal({
						title: '是否将此卡解除挂失!',
						// 提示文字
						// content: '是否取消订单？',
						// 取消按钮的文字自定义
						cancelText: "取消",
						// 确认按钮的文字自定义
						confirmText: "确定",
						//删除字体的颜色 
						confirmColor: '#000000',
						//取消字体的颜色
						cancelColor: '#999',
						success: function(res) {
							if (res.confirm) {
								let datas = {
									app_id: that.$https.weixinAppId,
									project_id: getApp().globalData.projectId,
									id:that.data.id
								};
								index.unlost(datas).then(result => {
									if (result.code == 1) {
										that.getMyCardDetail()
									}
								})
							}
						}
					})
				}
				// if (item.id == "6") {
				// 	uni.navigateTo({
				// 		url: '/pages_other/cardbag/card_share' 
				// 	})
				// }
				// if (item.url) {
				// 	uni.navigateTo({
				// 		url: item.url+ "&cardno=" + this.cardno
				// 	});
				// }
			},

			// 获取卡消费记录
			async getMoneyRecord(card_id) {
				let params = {
					card_id: card_id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
				}
				let res = await index.getMoneyRecord(params)
				if (res.code === 1) {
					this.recordList = res.data.result
				}
			},

			// 获取我的卡包详情
			async getMyCardDetail() {
				let params = {
					cardno: this.cardno,
					project_id: getApp().globalData.projectId,
					user_id: uni.getStorageSync('phone'),
					open_id: uni.getStorageSync("openid"),
					appid: this.$https.weixinAppId,
					id:this.id
				}
				let res = await index.getMyCardDetail(params)
				if (res.code === 1) {
					this.data = res.data.cardData
					let card_id = res.data.cardData.id
					this.card_id = res.data.cardData.id
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import url("@/static/css/personal/index.css");

	.card-detail {
		padding-bottom: env(safe-area-inset-bottom);

		.top {
			padding: 30rpx;
		}

		.vueBgdCol {
			position: fixed;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: black;
			z-index: 1001;
			-moz-opacity: 0.8;
			opacity: 0.8;
			filter: alpha(opacity=88);
		}

		.vueContant {
			position: fixed;
			top: 40%;
			left: 52.5%;
			width: 600rpx;
			height: 600rpx;
			margin-left: -320rpx;
			margin-top: -76px;
			background-color: white;
			z-index: 1002;
			overflow: auto;
			border-radius: 20rpx;
		}

		.vueTitle {
			display: flex;
			justify-content: center;
			font-size: 28rpx;
			padding-top: 22rpx;
			font-weight: 600;
		}

		.vueContants {
			position: fixed;
			top: 40%;
			left: 50%;
			width: 600rpx;
			height: 330rpx;
			margin-left: -320rpx;
			margin-top: -76px;
			background-color: white;
			z-index: 1002;
			overflow: auto;
			border-radius: 20rpx;
		}

		.vueTits {
			display: flex;
			justify-content: center;
			font-size: 28rpx;
			padding-top: 75rpx;
			font-weight: 600;
		}

		.vueDetail {
			font-size: 28rpx;
			color: #646566;
			display: flex;
			// justify-content: center;
			padding: 32rpx;
			height: 48rpx;
			margin-right: 20rpx;
		}

		/deep/.u-tag {
			margin-left: 20rpx;

		}

		/deep/.u-textarea {
			background-color: #f3f3f3;
			margin-top: 80rpx;
		}

		/deep/.u-button {
			width: 40%;
			height: 80rpx;
		}

		.vueBtn {
			display: flex;
			margin-top: 50rpx;
		}

		.vueBtns {
			display: flex;
			margin-top: 80rpx;
		}

		.vueBtn span {
			width: 320rpx;
			height: 96rpx;
			font-size: 24rpx;
			font-weight: 600;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.vueBtn span:first-child {
			border-top: 1px solid #ebedf0;
		}

		.vueBtn span:last-child {
			color: #ee0a24;
			border-top: 1px solid #ebedf0;
			border-left: 1px solid #ebedf0;
		}


		/deep/.u-row {
			margin-top: 40rpx;

			.box {
				border-radius: 12rpx;
				background-color: #f3f3f3;
				padding: 40rpx 0;

				.number {
					color: #2f75fa;
					margin-bottom: 40rpx;
					font-weight: bold;
				}
			}
		}

		/deep/.u-cell-group {
			.name {
				color: #333;
				font-weight: bold;
			}

			.number {
				color: #ff4105;
			}

			.date {
				color: #ccc;
			}

			.rest {
				color: #9c9c9c;
			}

			.rest,
			.date {
				margin-top: 14rpx;
				font-size: 26rpx;
			}
		}
	}
</style>